<!doctype>
<html>
<head>
    <meta charset="utf-8" >
    <link href="bootstrap.min.css" type="text/css" rel="stylesheet">
    <script src="../public/js/jquery-1.11.3.min.js"></script>
    <!--<script src="bootstrap-3.3.5-dist/js/bootstrap.js"></script>-->
    <script src="swipe.js"></script>
    <title></title>
    <style>
        .c-purple{
            color: purple;
        }
    </style>
</head>
<body>
<header>
    <div class="c-purple">
        <button class="btn btn-default" style="text-shadow:purple 5px 3px 3px;">
            <span class="glyphicon glyphicon-eye-open c-purple"></span>你好
        </button>
    </div>

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox" >
            <div class="item active" style="text-align: center">
                <img src="swipe-images/1.jpg" alt="1">
                <div class="carousel-caption">
                    hello
                </div>
            </div>
            <div class="item" style="text-align: center">
                <img src="swipe-images/2.jpg" alt="2">
                <div class="carousel-caption">
                    ...
                </div>
            </div>
            <div class="item" style="text-align: center">
                <img src="swipe-images/3.jpg" alt="2">
                <div class="carousel-caption">
                    ...
                </div>
            </div>

        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
    <!-- data-* 自定义属性 、text() 、 html() 测试-->
    <div>
        <div class="class1 class2"><div class="class3"><a data-value="1">hello<i>hh</i></a></div></div>
    </div>

</header>
<script>
    $(".carousel").carousel({
        /*interval:2000*/
    })

    /* data-* 自定义属性 、text() 、 html() 测试 */
    var a = $(".class1.class2 .class3").find('a')
    console.log("data-value: "+ a.data("value"))
    console.log("a.text(): "+ a.text())
    console.log("a.html(): "+ a.html())
</script>
</body>
</html>